<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新生报到系统</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<meta name="description" content="Developed By M Abdur Rokib Promy">
<meta name="keywords"
	content="Admin, Bootstrap 3, Template, Theme, Responsive">
<!-- bootstrap 3.0.2 -->
<link href="${path}/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<!-- font Awesome -->
<link href="${path}/css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<!-- Ionicons -->
<link href="${path}/css/ionicons.min.css" rel="stylesheet"
	type="text/css" />
<!-- Morris chart -->
<link href="${path}/css/morris/morris.css" rel="stylesheet"
	type="text/css" />
<!-- jvectormap -->
<link href="${path}/css/jvectormap/jquery-jvectormap-1.2.2.css"
	rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="${path}/css/datepicker/datepicker3.css" rel="stylesheet"
	type="text/css" />
<!-- fullCalendar -->
<!-- <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> -->
<!-- Daterange picker -->
<link href="${path}/css/daterangepicker/daterangepicker-bs3.css"
	rel="stylesheet" type="text/css" />
<!-- iCheck for checkboxes and radio inputs -->
<link href="${path}/css/iCheck/all.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->

<!-- Theme style -->
<link href="${path}/css/style.css" rel="stylesheet" type="text/css" />



<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
          <![endif]-->

<style type="text/css">
#right_side2, #right_side3, #right_side4 {
	display: none;
}
</style>
</head>
<body class="skin-black">
	<!-- header logo: style can be found in header.less -->
	<header class="header">
		<a href="index.html" class="logo"> 新生报到首页 </a>
		<!-- Header Navbar: style can be found in header.less -->
		<nav class="navbar navbar-static-top" role="navigation">
			<!-- Sidebar toggle button-->
			<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas"
				role="button"> <span class="sr-only">Toggle navigation</span> <span
				class="icon-bar"></span> <span class="icon-bar"></span> <span
				class="icon-bar"></span>
			</a>
			<div class="navbar-right">
				<ul class="nav navbar-nav">
					<!-- Messages: style can be found in dropdown.less-->
					<li class="dropdown messages-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-envelope"></i> <span class="label label-success">4</span>
					</a>
						<ul class="dropdown-menu">
							<li class="header">你有4条消息</li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu">
									<li>
										<!-- start message --> <a href="#">
											<div class="pull-left">
												<img src="${path}/images/img/26115.jpg" class="img-circle"
													alt="User Image" />
											</div>
											<h4>Support Team</h4>
											<p>Why not buy a new awesome theme?</p> <small
											class="pull-right"><i class="fa fa-clock-o"></i> 5
												mins</small>
									</a>
									</li>
									<!-- end message -->
									<li><a href="#">
											<div class="pull-left">
												<img src="${path}/images/img/26115.jpg" class="img-circle"
													alt="user image" />
											</div>
											<h4>Director Design Team</h4>
											<p>Why not buy a new awesome theme?</p> <small
											class="pull-right"><i class="fa fa-clock-o"></i> 2
												hours</small>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="${path}/images/img/avatar.png" class="img-circle"
													alt="user image" />
											</div>
											<h4>Developers</h4>
											<p>Why not buy a new awesome theme?</p> <small
											class="pull-right"><i class="fa fa-clock-o"></i>
												Today</small>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="${path}/images/img/26115.jpg" class="img-circle"
													alt="user image" />
											</div>
											<h4>Sales Department</h4>
											<p>Why not buy a new awesome theme?</p> <small
											class="pull-right"><i class="fa fa-clock-o"></i>
												Yesterday</small>
									</a></li>
									<li><a href="#">
											<div class="pull-left">
												<img src="${path}/images/img/avatar.png" class="img-circle"
													alt="user image" />
											</div>
											<h4>Reviewers</h4>
											<p>Why not buy a new awesome theme?</p> <small
											class="pull-right"><i class="fa fa-clock-o"></i> 2
												days</small>
									</a></li>
								</ul>
							</li>
							<li class="footer"><a href="#">查看全部消息</a></li>
						</ul></li>
					<li class="dropdown tasks-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-tasks"></i> <span class="label label-danger">9</span>
					</a>
						<ul class="dropdown-menu">
							<li class="header">你有9个任务</li>
							<li>
								<!-- inner menu: contains the actual data -->
								<ul class="menu">
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Design some buttons <small class="pull-right">20%</small>
											</h3>
											<div class="progress progress-striped xs">
												<div class="progress-bar progress-bar-success"
													style="width: 20%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">20% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Create a nice theme <small class="pull-right">40%</small>
											</h3>
											<div class="progress progress-striped xs">
												<div class="progress-bar progress-bar-danger"
													style="width: 40%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">40% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Some task I need to do <small class="pull-right">60%</small>
											</h3>
											<div class="progress progress-striped xs">
												<div class="progress-bar progress-bar-info"
													style="width: 60%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">60% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
									<li>
										<!-- Task item --> <a href="#">
											<h3>
												Make beautiful transitions <small class="pull-right">80%</small>
											</h3>
											<div class="progress progress-striped xs">
												<div class="progress-bar progress-bar-warning"
													style="width: 80%" role="progressbar" aria-valuenow="20"
													aria-valuemin="0" aria-valuemax="100">
													<span class="sr-only">80% Complete</span>
												</div>
											</div>
									</a>
									</li>
									<!-- end task item -->
								</ul>
							</li>
							<li class="footer"><a href="#">查看所有任务</a></li>
						</ul></li>
					<!-- User Account: style can be found in dropdown.less -->
					<li class="dropdown user user-menu"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"> <i
							class="fa fa-user"></i> <span>个人中心 <i class="caret"></i></span>
					</a>
						<ul class="dropdown-menu dropdown-custom dropdown-menu-right">
							<li class="dropdown-header text-center">账户</li>

							<li><a href="#"> <i
									class="fa fa-clock-o fa-fw pull-right"></i> <span
									class="badge badge-success pull-right">10</span> 更新
							</a> <a href="#"> <i class="fa fa-envelope-o fa-fw pull-right"></i>
									<span class="badge badge-danger pull-right">5</span> 消息
							</a> <a href="#"><i class="fa fa-magnet fa-fw pull-right"></i> <span
									class="badge badge-info pull-right">3</span> 订阅</a> <a href="#"><i
									class="fa fa-question fa-fw pull-right"></i> <span
									class="badge pull-right">11</span> 常见问题</a></li>

							<li class="divider"></li>

							<li><a href="#"> <i class="fa fa-user fa-fw pull-right"></i>
									轮廓
							</a> <a data-toggle="modal" href="#modal-user-settings"> <i
									class="fa fa-cog fa-fw pull-right"></i> 设定值
							</a></li>

							<li class="divider"></li>

							<li><a href="/student/login?out=1"><i class="fa fa-ban fa-fw pull-right"></i>
									退出</a></li>
						</ul></li>
				</ul>
			</div>
		</nav>
	</header>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="left-side sidebar-offcanvas">
			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">
				<!-- Sidebar user panel -->
				<div class="user-panel">
					<div class="pull-left image">
						<img src="${path}/images/img/26115.jpg" class="img-circle"
							alt="User Image" />
					</div>
					<div class="pull-left info">
						<p>你好, Jane</p>

						<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
					</div>
				</div>
				<!-- search form -->
				<form action="#" method="get" class="sidebar-form">
					<div class="input-group">
						<input type="text" name="q" class="form-control"
							placeholder="Search..." /> <span class="input-group-btn">
							<button type='submit' name='seach' id='search-btn'
								class="btn btn-flat">
								<i class="fa fa-search"></i>
							</button>
						</span>
					</div>
				</form>
				<!-- /.search form -->
				<!-- sidebar menu: : style can be found in sidebar.less -->
				<ul class="sidebar-menu">
					<li class="active"><a onclick="tihuan('right_side1')"
						style="cursor: pointer;"> <i class="fa fa-dashboard"></i> <span>仪表板</span>
					</a></li>
					<li><a onclick="tihuan('right_side2')"
						style="cursor: pointer;"> <i class="fa fa-gavel"></i> <span>一般</span>
					</a></li>

					<li><a onclick="tihuan('right_side3')"
						style="cursor: pointer;"> <i class="fa fa-globe"></i> <span>基本要素</span>
					</a></li>

					<li><a onclick="tihuan('right_side4')"
						style="cursor: pointer;"></i> <span>简单表</span> </a></li>

				</ul>
			</section>
			<!-- /.sidebar -->
		</aside>
		<aside id="right_side1" class="right-side">
			<%@ include file="../views/index-a.jsp"%>
		</aside>
		<aside id="right_side2" class="right-side">
			<%@ include file="../views/general.jsp"%>
		</aside>
		<aside id="right_side3" class="right-side">
			<%@ include file="../views/basic_form.jsp"%>
		</aside>
		<aside id="right_side4" class="right-side">
			<%@ include file="../views/simple.jsp"%>
		</aside>
		<!-- /.right-side -->

	</div>
	<!-- ./wrapper -->


	<!-- jQuery 2.0.2 -->
	<script src="${path}/js/jquery.min.js" type="text/javascript"></script>

	<!-- jQuery UI 1.10.3 -->
	<script src="${path}/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="${path}/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- daterangepicker -->
	<script src="${path}/js/plugins/daterangepicker/daterangepicker.js"
		type="text/javascript"></script>

	<script src="${path}/js/plugins/chart.js" type="text/javascript"></script>

	<!-- datepicker
        <script src="js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>-->
	<!-- Bootstrap WYSIHTML5
        <script src="js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>-->
	<!-- iCheck -->
	<script src="${path}/js/plugins/iCheck/icheck.min.js"
		type="text/javascript"></script>
	<!-- calendar -->
	<script src="${path}/js/plugins/fullcalendar/fullcalendar.js"
		type="text/javascript"></script>

	<!-- Director App -->
	<script src="${path}/js/Director/app.js" type="text/javascript"></script>

	<!-- Director dashboard demo (This is only for demo purposes) -->
	<script src="${path}/js/Director/dashboard.js" type="text/javascript"></script>

	<!-- Director for demo purposes -->
	<script type="text/javascript">
		function tihuan(right_side) {
			for (var i = 1; i < 5; i++) {
				$("#right_side" + i).css({
					"display" : "none",
				});
			}
			$("#" + right_side).css("display", "block");

		}
		$('input').on('ifChecked', function(event) {
			// var element = $(this).parent().find('input:checkbox:first');
			// element.parent().parent().parent().addClass('highlight');
			$(this).parents('li').addClass("task-done");
			console.log('ok');
		});
		$('input').on('ifUnchecked', function(event) {
			// var element = $(this).parent().find('input:checkbox:first');
			// element.parent().parent().parent().removeClass('highlight');
			$(this).parents('li').removeClass("task-done");
			console.log('not');
		});
	</script>
	<script>
		$('#noti-box').slimScroll({
			height : '400px',
			size : '5px',
			BorderRadius : '5px'
		});

		$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey')
				.iCheck({
					checkboxClass : 'icheckbox_flat-grey',
					radioClass : 'iradio_flat-grey'
				});
	</script>
	<script type="text/javascript">
		$(function() {
			"use strict";
			//BAR CHART
			var data = {
				labels : [ "January", "February", "March", "April", "May",
						"June", "July" ],
				datasets : [ {
					label : "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [ 65, 59, 80, 81, 56, 55, 40 ]
				}, {
					label : "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [ 28, 48, 40, 19, 86, 27, 90 ]
				} ]
			};
			new Chart(document.getElementById("linechart").getContext("2d"))
					.Line(data, {
						responsive : true,
						maintainAspectRatio : false,
					});

		});
		// Chart.defaults.global.responsive = true;
	</script>
</body>
</html>